<script lang="ts" setup>
import DescVue from '@/components/Desc.vue'
import _ from 'lodash'
import { ref } from 'vue'
import { def_cfg, ws_cfg } from './runtime'

const code1 =
  _.trim(`
import _ from 'lodash' // 可以使用lodash库
/**
 * ========= 全局常量 =========
 */ 
const ApiStatus =  {
  PUBLISHED: 0, /** 已发布 */
  MAINTAIN: 1, /** 维护 */
  DEPRECATED: 2, /** 废弃 */
  UNDEF: 3, /** 待定 */
  DEV: 4, /** 开发 */
  Unkown5: 5,
  TODEV: 6, /** 对接 */
  UNKOWN7,
  DESIGN: 8, /** 设置 */
  FINISH: 9, /** 已完成 */
}
/** http method */
const ApiMethod = {
  POST: 0,
  GET: 1,
  PUT: 2,
  DEL: 3,
}
/**
 * ======== 函数作用域变量, 通过 args 参数获取 =========
 *  - API_URL: string #(eg:/foo/bar/baz) 当前api接口url
 *  - API_METHOD: ApiMethod #枚举类型
 *  - API_METHOD_NAME: 'get' | 'put' | 'post' | 'delete' #API_METHOD字面量,方便使用
 *  - API_STATUS: ApiStatus #枚举类型
 *  - IS_FORM_DATA: boolean #当前接口入参是否为FormData
 *  - IS_QUERY: boolean #当前接口是否使用query传参
 *  - API_GROUP_NAME: string #当前api组名称
 *  - API_JS_DOC: string #当前api的jsdoc
 *  - API_TS_DTO: string #当前api的入参(typescript格式)
 *  - API_TS_VO: string #当前api的视图(typescript格式)
 *  - file_docs: string #批量生成api文档时，头注释
 *  - file_imports: string #批量生成api文档时，头部信息
 */
                `)

// DEBUG:
const activeKeyRef = ref(['3'])
</script>

<script lang="ts">
export default {
  name: 'PageEolinkTemplate'
}
</script>
<template>
  <a-page-header title="模版说明" @back="$router.back" />
  <div class="wrapper">
    <a-collapse v-model:activeKey="activeKeyRef" ghost="ghost">
      <a-collapse-panel key="1" header="模板配置环境">
        <desc-vue class="code" :code="
          code1
        " lang="js" />
      </a-collapse-panel>
      <a-collapse-panel key="2" header="万视配置">
        <desc-vue class="code" :code="
          _.trim(`${ws_cfg}`)
        " lang="js" />
      </a-collapse-panel>
      <a-collapse-panel key="3" header="默认配置">
        <desc-vue class="code" :code="
          _.trim(`${def_cfg}`)
        " lang="js" />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<style lang="less" scoped>
.wrapper {
  height: 80vh;
  width: 80vw;
  overflow-y: auto;

  .code {
    width: 100%;
    height: auto;
  }
}
</style>